<template>
    <!-- 结算汇总 -->
    <div class="container">
        <!-- 表单栏 -->
        <el-row>
            <el-col :span="24" class="form-containerAcc">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="结算期间">
                        <el-col :span="11">
                        <el-date-picker type="date" v-model="formInline.dateFrom" style="width: 100%;"></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                        <el-date-picker type="date" v-model="formInline.dateTo" style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="营运单位">
                        <el-autocomplete
                            class="inline-input"
                            v-model="comp"
                            :fetch-suggestions="querySearchComp"
                            placeholder="请输入内容" style="width:300px;">
                        </el-autocomplete>
                    </el-form-item>
                    <el-form-item label="线路">
                        <el-autocomplete
                            class="inline-input"
                            v-model="line"
                            :fetch-suggestions="querySearchLine"
                            placeholder="请输入内容" style="width:400px">
                        </el-autocomplete>
                    </el-form-item>
                    <el-form-item label="车牌号">
                        <el-autocomplete
                            class="inline-input"
                            v-model="formInline.carNum"
                            :fetch-suggestions="querySearchCarNum"
                            placeholder="请输入内容">
                        </el-autocomplete>
                    </el-form-item>
                    <el-form-item label="班次">
                        <el-select v-model="formInline.banCi">
                        <el-option label="所有" value="all"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="rf">
                        <button class="check-btn" @click="getList" type="button"><img src="../../assets/imgs/operation_btn_icon_tiqujl_default copy.png" alt="">提取记录</button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <!-- 条码 -->
        <el-row>
            <el-col :span="24" class="form-containerAcc">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="条码/单号">
                        <el-input v-model="formInline.tX"></el-input>
                    </el-form-item>
                    <el-form-item class="rf">
                        <button class="check-btn" type="button">提交结算</button>
                    </el-form-item>
                    <el-form-item class="rf">
                        <button class="check-btn" @click="reset" type="button">重置</button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <!-- tab -->
        <el-row>
            <el-col :span="24" class="form-containerAcc">
                <el-tabs v-model="tagActive">
                    <el-tab-pane label="已扫描发班单列表" name="list">
                        <div class="table-fun">
                            <img src="../../assets/imgs/operation_icon_shanchu_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="remove">移除</div>
                        </div>
                        <!-- 表格栏 -->
                        <avue-crud ref="crud" :data="accTable.data" :option="accTable.option" @current-row-change="rowChange" :page="accTable.page"  @current-change="accPage"></avue-crud>
                    </el-tab-pane>
                    <el-tab-pane label="已扫描单信息汇总" name="huizong">
                        <el-row>
                            <el-col :span="8" class="sum-left">
                                <ul class="msg-ul">
                                    <li>发班单数量: {{detailMsg.billcount}}</li>
                                    <li>合计人数: {{detailMsg.totalpeople}}</li>
                                    <li>合计票款: {{detailMsg.totalmoney}}</li>
                                    <li>合计人数(加班): {{detailMsg.ottotalpeople}}</li>
                                    <li>合计票款(加班): {{detailMsg.ottotalmoney}}</li>
                                </ul>
                            </el-col>
                            <el-col :span="16">
                                <el-tag
                                :key="tag"
                                v-for="tag in dynamicTags"
                                closable
                                :disable-transitions="false"
                                @close="handleClose(tag)">
                                {{tag}}
                                </el-tag>
                            </el-col>
                        </el-row>
                        
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
        
        
        
    </div>
</template>

<script>
export default {
  data: function() {
    return {
        formInline:{
            dateFrom:"",
            dateTo:"",
            banCi:"",
            carNum:"",
            tX:""
        },
        line:"",
        comp:"",
        lineList:[],
        compList:[],
        carNumList:[],
        lineID:"",
        compID:"",
        currentRow:"",
        accTable:{
            page: {
                pageSizes: [10],
                total: 20,
                currentPage: 1,
                pageSize: 10,
            },
            data:[],
            option:{
                menu:false,
                highlightCurrentRow:true,
                page:true,
                index:true,
                column:[
                    {
                        label:"发班单号",
                        prop:"no"
                    },
                    {
                        label:"线路",
                        prop:"line_name"
                    },
                    {
                        label:"班次日期",
                        prop:"bus_date"
                    },
                    {
                        label:"班次号",
                        prop:"bus_id"
                    },
                    {
                        label:"人数",
                        prop:"people_count"
                    },
                    {
                        label:"票款",
                        prop:"ticket_price_sum"
                    },
                    {
                        label:"结算方案",
                        prop:"balance_plan_id"
                    },
                    {
                        label:"营运单位",
                        prop:"customer_name"
                    },
                    {
                        label:"车牌号",
                        prop:"vehino"
                    },
                    {
                        label:"扫描时间",
                        prop:"scand_time"
                    },
                ]
            }
        },
        tagActive:"list",
        detailMsg:{
            billcount:"",
            totalpeople:"",
            totalmoney:"",
            ottotalpeople:"",
            ottotalmoney:""
        },
        dynamicTags:["标签一"]
    };
  },
  methods: {
    querySearchLine(queryString, cb) {
        var restaurants = this.lineList;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
    },
    querySearchComp(queryString, cb) {
        var restaurants = this.compList;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
    },
    querySearchCarNum(queryString, cb) {
        var restaurants = this.carNumList;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
    },
    createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
    },
    getLineList(){
        this.postRequest("/sch/data/line/listWithSpell").then(data=>{
            for(var item of data.data){
                this.lineList.push({
                    value:item.name,
                    id:item.id
                })
            }
        })
    },
    getCompList(){
        this.postRequest("/sch/data/bus_company/listWithSpell").then(data=>{
            for(var item of data.data){
                this.compList.push({
                    value:item.name,
                    id:item.id
                })
            }
        })
    },
    getCarList(){
        this.postRequest("/sch/data/bus_vehicle/listWithSpell").then(data=>{
            for(var item of data.data){
                this.carNumList.push({
                    value:item.vehi_no,
                })
            }
        })
    },
    getList(){
        // 提取
        this.postRequest("/fin/balance/sum/doGather",{
            busdate_start:this.dateToString(this.formInline.dateFrom),
            busdate_end:this.dateToString(this.formInline.dateTo),
            line_id:this.lineID,
            cust_id:this.compID,
            vehi_no:this.formInline.carNum,
            bus_type:this.formInline.banCi,
            noOrBarcode:this.formInline.tX,
        }).then(data=>{
            console.log(this.lineID);
            this.msgShow(data,function(){});
        })
        // 获取列表
        this.postRequest("/fin/balance/sum/scanedList",{
            rows:10,
            page:this.accTable.page.currentPage
        }).then(data=>{
            this.accTable.data=data.data.list;
        })
        this.getDetail();
        this.getdynamicTags();
    },
    // 获取汇总信息
    getDetail(){
        this.postRequest("/fin/balance/sum/scanedSummary").then(data=>{
            this.detailMsg=data.data[1]
        })
    },
    reset(){
        this.postRequest("/fin/balance/sum/doRemoveGatherSingle",{
            type:"all"
        }).then(data=>{
            this.msgShow(data,function(){})
        })
    },
    remove(){
        this.postRequest("/fin/balance/sum/doRemoveGatherSingle",{
            id:this.currentRow.id
        }).then(data=>{
            this.msgShow(data,function(){});
            this.getList();
        })
    },
    accPage(val){
        this.accTable.page.currentPage=val;
        this.getList();
    },
    getdynamicTags(){
        this.postRequest("/fin/balance/sum/scanedSummary").then(data=>{
            console.log(data);
            this.dynamicTags=data.data[1].lines.split(";")
            console.log(this.dynamicTags);
        })
    },
    handleClose(tag){
        console.log(tag);
        var tagid=tag.slice(0,1);
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        this.postRequest("/fin/balance/sum/doRemoveGather",{
            id:tagid
        }).then(data=>{
            this.msgShow(data,function(){})
        })
    },
    rowChange(val){
        this.currentRow=val;
    }
  },
  computed: {},
  watch: {
      line(){
          for(var item of this.lineList){
              if(this.line==item.value){
                  this.lineID=item.id
              }
          }
      },
      comp(){
          for(var item of this.compList){
              if(this.comp==item.value){
                  this.compID=item.id
              }
          }
      }
  },
  mounted() {
      console.log("结算汇总");
      this.$emit("sendActive","5-4");
      this.getLineList();
      this.getCompList();
      this.getCarList();
  }
};
</script>
<style scoped src="../../assets/css/financeManage/accountSum.css">
</style>